浏览器存储(Web Storage)扩展EStorage

HTML5中新增了Web Storage的规范，目的是解决客户端存储数据，而无需将数据持续的发回服务器。它提供了两个对象sessionStorage和localStorage，这两个对象都是以windows对象属性的形式存在的，区别在于localStorage存储的数据不会过期，sessionStorage存储的数据每次关闭浏览器后都会被清空。

为什么出这个扩展类

Web Storage的出现解决了cookie不适合浏览器存储大量数据和每次请求时，cookie都会存放在请求头中，传输到服务器端的问题。

Storage的两个实例提供了以下五个方法：

• clear()：删除所有值；Firefox中没有实现。
• getItem(name)：根据指定的name获取对应的值。
• key(index)：获得index位置处的值的名字。
• removeItem(name)：删除由name指定的名值对。
• setItem(name,value)：为指定的name设置一个对应的值。

虽然Storage的几个方法调用很简单，但是只能存储字符串格式的数据，这给实际编码过程中带来了很大的困扰，比如：当我存入一个Object数据时，每次存入之前都要数据转化成字符串，取出使用的时候也要将字符串再转化为对象，并且人为的要记住存入值的格式。
所以，为了减少重复劳动，以后少些重复代码，顺便提升下效率，所以做了一个封装。

两个操作对象EStorage.session和EStorage.local，分别对应sessionStorage和localStorage
提供了8个方法

• set(key,value)：为指定的key设置一个对应的值。
• remove(key)：删除由key指定的名值对。
• clear()：删除所有值；Firefox中没有实现。
• update 更新(key,value)。
• get(key)：根据指定的key获取对应的值。
• keyType(key)： 对应key值的数据类型
• isexist(key)： 是否存在
• getAll()： 获取所有的值,返回object

支持七种数据格式：String，Number，Boolean，Function，Date，Object，Array
特点：
1、存入什么数据类型，取出什么数据类型
2、通过原生方法存入的数据，只能取出字符串
3、与原生方法共存
4、易扩展

安装使用

浏览器：

<script src="./dist/EStorage.min.js"></script>
<script>
  EStorage.session.set('newObj', {key:'value'})
  console.log(EStorage.session.get('newObj'))
</script>

npm：

// commonjs 引入
const EStorage = require('EStorage')
EStorage.session.set('newObj', {key: 'value'})
console.log(EStorage.session.get('newObj'))

// es6 引入
import EStorage from 'EStorage'
EStorage.local.set('number', 123)
console.log(EStorage.local.get('number'))

addEvent支持对某个键值对进行监听，如果监听的值发生变化（set， update，remove，clear），则触发注册的回调函数

事件

EStorage.session.addEvent("key", function(newVal, oldVal, type){
  console.log( newVal, oldVal, type)
})

最后附上github地址 https://github.com/James-Nie/...